JavaScriptでfunctionとarrow functionのどちらを使えばいいだろうか

from 2022/03/10

function func() {...}とfunc = () => {...}ってどっちを使えばいいのだろうかtakker.icon

(一方しか使えない場合は除く)

その時の気分でいいのかな

thisがあれな感じになるので後者の方が良い気がするinajob.iconnishio.icon

違いを全て上げろといわれてさっと言えない

JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。 - Qiita

前者だと巻き上げされるのも気持ち悪いな

巻き上げないと困らないか...循環的に相互依存してる場合とかbsahd.icon

(一方しか使えない場合は除く)に入るのかな

後者は変数（または定数）に代入しているので、巻き上げができないのも自然に理解できるMijinko_SD.icon

ES Modules内だとふつうに巻き上げされるtakker.icon

あ、thisが関わる場合は(一方しか使えない場合は除く)に含めたつもりでしたtakker.icon

これはarrow function一択しかない

scrapbox-userscript-stdとかは基本的にfunction (JS)を使っているのですが、functionにする理由がなければ全部arrow functionにしちゃったほうがいいのかなーと思ったり

トップレベルやオブジェクトのスコープではfunction、残りは全てarrow functionにしてるkuuote.icontakker.icon

code:javascript

functon hoge(fn) {

return {

run() {

fn();

}

};

}

hoge(() => console.log(42));

意味の無いコードだけどまあこんな感じで

object scopeはarrrow functionにしてるtakker.icon

object scopeってなんですか？mrsekut.icon

多分{ name: "...", value: 23}とobjectを定義するときの、その{}の中のことだと思いますtakker.icon

object scopeでfunctionを使う

code:js

const reader = {

id: "aaa",

read() {

/* ... */

};

object scopeでarrow functionを使う

code:js

const reader = {

id: "aaa",

read: () => {

/* ... */

};

古い癖抜けきれてなくてfunction派だが、呼び出しがネストするなどthis問題でやばそうなときはarrowさんに頼るsta.icon

明示的なfunctionを使う理由がないならアロー関数を使うnishio.icon

友人の記事: イマドキのJavaScriptの書き方2018 - Qiita

1つのファイルで完結するスクリプトを書く時は、泣く泣くfunctionを使っているmrsekut.icon

main関数を上に書きたいけど、arrowだと書けない

/mrsekut-p/main関数を上部に書く#6124acae1982700000b0c153

主張の意味がよくわからないnishio.icon

「呼び出しよりも定義が先にある必要がある」はtrueだが、それはmainの定義をleafの定義より先に置くことを妨げない

どういうことでしょう？mrsekut.icon

「呼び出しよりも定義が先にある必要がある」がtrueになるのはallowの時のみ

functionなら書ける

code:エラー.ts

main();

const main = () => {

leaf1();

leaf2()

}

const leaf1 = () => {}

const leaf2 = () => {}

code:動く.ts

main()

function main() {

leaf1();

leaf2();

}

function leaf1() {}

function leaf2() {}

main()とその他の関数をファイルごと分けてしまう手もありそうMijinko_SD.icon

それはそうですmrsekut.icon

JavaScriptでfunctionとarrow functionのどちらを使えばいいだろうか#62902a8b198270000033ba65で「1つのファイルで完結する」と書いてるのはそのためです

あ、ほんとだMijinko_SD.icon

見落としてた…

=>が何の情報量も持ってないから慣れるまでがしんどいsta.icon

funcitonみたいに言葉だとわかりやすいが、ただの記号、というか矢印

なかなか馴染んでくれない

まあそういうと()とか{}とか;もそうだろとなりそうだが

結局慣れなのかな

これとか初見でわからないMijinko_SD.icon

code:js

(()=>{

// 処理

})();

最初の()と後ろの()で意味が違う

最初：演算子の優先順位付け

後ろ：函数実行

個人的にはfunctionとvariableをごっちゃにしたくないので、関数はfunctionで書く傾向にあるMijinko_SD.icon

ただ、function自体がアロー関数に劣るのであれば、変えたほうが良いかなと思っている

色々読んでから決めることにした

【TypeScript】結局のところfunctionとアロー関数はどちらを使うべきなのか？ #TypeScript - Qiita

（読んだら追記する）

もうちょっと自分の傾向を深掘りするか

通常の関数で書くもの

トップレベルにある関数

関数の中の一番上に書く関数

関数内からのみ呼び出されるやつ

この関数自体を外に出すことはない

アロー関数で書くもの

コールバック関数

動的に作成する関数

まあでも、同じ構文（const）使うとシンプルになるぜーはあるか

doc.deno.landで関数がFunctionsではなくVariablesの欄に表示されてしまうyosider.icon

JavaScriptでfunctionとarrow functionのどちらを使えばいいだろうか#629002ae1280f00000665badのときはまだfunctionを使ってたけど、このページで質問してからは、なるべくarrow functionを使うようになったtakker.icon

上記に上がっていない利点

type数が減る

minifyしたとき数文字節約できる

まあ大した利点ではない